<template>
	<view>
		<up-navbar title="我的" bgColor="transparent" leftIcon="" />
	</view>
	<view class="main">
		<!-- 个人信息 -->
		<view class="profile-section">
			<view class="user-card">
				<view class="avatar">
					<up-avatar src="http://resources.codeinn.cn/center/avatar.jpg" shape="circle" size="80">
					</up-avatar>
				</view>
				<view class="data-board">
					<up-text text="骑驴找猪" size="19" style="margin-top: 10rpx;"></up-text>
					<up-text text="设置个性签名 " size="13" style="margin-top: 20rpx;" color="#c4c6c9" suffixIcon="edit-pen"
						:iconStyle="editIconStyle"></up-text>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="panel">
			<!-- 标题 -->
			<up-cell title="我的订单" class="pannel-title">
				<template #right-icon>
					<navigator url="/pages/cart/cart">
						<up-text text="全部订单" type="info" size="12" suffixIcon="arrow-right"
							:iconStyle="iconStyle"></up-text>
					</navigator>
				</template>
			</up-cell>
			<!-- 菜单 -->
			<view class="panel-body order-menu">
				<u-grid col="5" align="center">
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-1.jpg" width="60rpx"
								height="52rpx" style="text-align: center;"></up-image>
							<up-text text="待付款" margin="25rpx 0 0 0" align="center" color="#555" size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-2.jpg" width="60rpx"
								height="52rpx"></up-image>
							<up-text text="待发货" margin="25rpx 0 0 0" align="center" color="#555" size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-3.jpg" width="60rpx"
								height="52rpx"></up-image>
							<up-text text="待收货" margin="25rpx 0 0 0" align="center" color="#555" size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-4.jpg" width="60rpx"
								height="52rpx"></up-image>
							<up-text text="待评价" margin="25rpx 0 0 0" align="center" color="#555" size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-5.jpg" width="60rpx"
								height="52rpx"></up-image>
							<up-text text="售后" margin="25rpx 0 0 0" align="center" color="#555" size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 我的资产 -->
		<view class="panel">
			<!-- 标题 -->
			<u-cell title="我的资产"></u-cell>
			<!-- 菜单 -->
			<view class="panel-body asset-menu">
				<u-grid col="4">
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-6.jpg" width="68rpx"
								height="53rpx"></up-image>
							<up-text text="优惠券" margin="25rpx 0 0 0" align="center" color="#555" size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
								<up-image src="http://resources.codeinn.cn/center/icon-7.jpg" width="68rpx"
									height="53rpx"></up-image>
								<up-text text="我的余额" margin="25rpx 0 0 0" align="center" color="#555"
									size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-8.jpg" width="68rpx"
								height="53rpx"></up-image>
							<up-text text="D币" margin="25rpx 0 0 0" align="center" color="#555" size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-9.jpg" width="68rpx"
								height="53rpx"></up-image>
							<up-text text="红包" margin="25rpx 0 0 0" align="center" color="#555" size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 工具 -->
		<view class="panel">
			<!-- 标题 -->
			<u-cell title="工具"></u-cell>
			<!-- 菜单 -->
			<view class="panel-body tool-menu">
				<u-grid col="4">
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
								<up-image src="http://resources.codeinn.cn/center/icon-10.jpg" width="71rpx"
									height="57rpx"></up-image>
								<up-text text="会员中心" margin="25rpx 0 40rpx 0" align="center" color="#555"
									size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../address/list/list">
							<view class="tool">
								<up-image src="http://resources.codeinn.cn/center/icon-11.jpg" width="71rpx"
									height="57rpx"></up-image>
								<up-text text="收货地址" margin="25rpx 0 40rpx 0" align="center" color="#555"
									size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
								<up-image src="http://resources.codeinn.cn/center/icon-12.jpg" width="71rpx"
									height="57rpx"></up-image>
								<up-text text="售后&客服" margin="25rpx 0 40rpx 0" align="center" color="#555"
									size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../setting/setting">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-13.jpg" width="71rpx"
								height="57rpx"></up-image>
							<up-text text="设置" margin="25rpx 0 40rpx 0" align="center" color="#555"
								size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-14.jpg" width="71rpx"
								height="57rpx"></up-image>
							<up-text text="入驻合作" margin="25rpx 0 0 0" align="center" color="#555"
								size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-15.jpg" width="71rpx"
								height="57rpx"></up-image>
							<up-text text="反馈&投诉" margin="25rpx 0 0 0" align="center" color="#555"
								size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-16.jpg" width="71rpx"
								height="57rpx"></up-image>
							<up-text text="商品报告" margin="25rpx 0 0 0" align="center" color="#555"
								size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
					<u-grid-item>
						<navigator url="../order/order">
							<view class="tool">
							<up-image src="http://resources.codeinn.cn/center/icon-17.jpg" width="71rpx"
								height="57rpx"></up-image>
							<up-text text="关于我们" margin="25rpx 0 0 0" align="center" color="#555"
								size="24rpx"></up-text>
							</view>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<up-gap height="1"></up-gap>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	let iconStyle = ref({
		fontSize: '21rpx',
		color: "#c4c6c9"
	})
	let editIconStyle = ref({
		fontSize: '30rpx',
		color: "#c4c6c9"
	})
</script>

<style scoped lang="scss">
	.main {
		
	}

	.user-card {
		padding: 120rpx 40rpx 40rpx 40rpx;
		display: flex;
		align-items: center;

		.data-board {
			margin-left: 30rpx;
			margin-top: 10rpx;
		}
	}

	.panel {
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.panel:last-child {
		margin-bottom: 50rpx;
	}

	.panel-body {
		padding: 40rpx 0;
	}

	.panel-body navigator {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.tool {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>